<template>
  <div id="app">
    <!-- v-for -->
    <!-- <div v-for="item in arr" :key="index">{{item}}</div> -->
    <!-- item后用逗号分隔声明index，index就是索引 -->
    <!-- <div>
      <div v-for="(item, index) in arr" :key="index">
        名称：{{ item.name }} - 价格：{{ item.price }}
      </div>
    </div> -->
    <!-- 循环数字 -->
    <!-- <div>
      <div v-for="(item, index) in 10" :key="index">
        {{ index }}--{{ item }}
      </div>
    </div> -->
    <!-- 循环对象 -->
    <!-- <div>
      <div v-for="(value, key, index) in obj" :key="index">
        {{ index }}--{{ key }}--{{ value }}
      </div>
    </div> -->
    <div class="box">123</div>
    <ul>
      <!-- 1.绑定class ，class里面可以直接写表达式，并且返回值是字符串类型的class名称 -->
      <li :class="false ? `active` : ''">1</li>
      <!-- 2.已经包含了固定类名 -->
      <li class="item" :class="`active`">2</li>
      <!-- 3.绑定数组，每一项都是字符串类型的类名（可以写表达式生成字符串） -->
      <li :class="[false ? 'item' : '', true ? 'active' : '']">3</li>
      <!-- 4.绑定对象，key是类名，value是条件，条件为真的话，类名就会加上 -->
      <li
        :class="{
          item: true,
          active: false,
        }"
      >
        4
      </li>
    </ul>
    <!-- 绑定style -->
    <div>
      <!-- style里面可以写表达式 -->
      <div :style="true ? 'width:50px;height:50px;background:red;' : ''"></div>
      <!-- 数组 -->
      <div
        :style="[
          { width: 50 + 'px' },
          { height: 50 + 'px' },
          { background: 'blue' },
        ]"
      ></div>
      <!-- 对象 -->
      <div :style="{
        width:50+'px',
        height:50+'px',
        background:'yellow',
        display:true ? 'block':'none'
      }"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      obj: {
        a: 1,
        b: 2,
        c: 3,
      },
      arr: [
        {
          id: 1,
          name: "sk2",
          price: 650,
        },
        {
          id: 2,
          name: "衣服",
          price: 150,
        },
        {
          id: 3,
          name: "ysl礼盒",
          price: 350,
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less">
// 1.安装less和less-loader
// npm i less less-loader -D
// 推荐1.创建项目的时候，直接选择包含css预处理器
// 2.在style标签上声明lang='less'属性（创建项目是如果选择css预处理器，默认就存在
.box {
  position: relative;
  width: 100px;
  height: 100px;
  background: lightcoral;
  &::after {
    width: 50px;
    height: 50px;
    background: lawngreen;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: "";
  }
}
.active {
  color: red;
}
</style>
